<template>
    <div>
        <cu-navbar>
            <block slot="content">转赠</block>
        </cu-navbar>
        <view class="login-home">
            <view class="bg-white" style="height: 100%;">
                <view class="content">
                    <view class="phone">
                        <u-input autocomplete="off" v-model="mobile" height="84" :customStyle="{fontSize:'28rpx'}"
                                 maxlength='11' type="number" :placeholder-style="placeholderStyle" placeholder="请输入对方手机号"
                                 @blur="hushcode" />
                      <div class="button" @click="searchValue">查询余额</div>
                    </view>

                    <view class="phone">
                        <u-input autocomplete="off" v-model="money" height="84" :customStyle="{fontSize:'28rpx'}"
                                 maxlength='11' type="number" :placeholder-style="placeholderStyle" placeholder="请输入转赠数量"
                                 @blur="hushcode" />
                    </view>
                    <view class="password">
                        <u-input autocomplete="off" v-model="captcha" height="84" type="password"
                                 :customStyle="{fontSize:'28rpx'}" :placeholder-style="placeholderStyle" placeholder="请输入支付密码" />
                    </view>
                  <view class="may-value">我的DHC积分余额：{{ userInfo.dhc || 0 }}</view>
                  <view class="may-value">我的查询余额：{{ chaxunyue || 0 }}</view>
                    <text class="submit" @click="submit">确认转赠</text>
                </view>
        
            </view>
            <u-popup v-model="show" mode="center">
                <view class="box_popup box_popup1">
                    <view>可用DHC积分转赠</view>
                    <view>
                        用户名：{{ foruserInfo.result }}
                    </view>
                    <view class="btn">
                        <view class="cancel" @click="show = false">取消</view>
                        <view class="ok" @click="confirm_chaifen">确定</view>
                    </view>
                </view>
            </u-popup>
        </view>
    </div>
</template>

<script>
import {
  DOWNLOAD_URL,
  API_URL,
  API_URL2
} from "../../env.js";
export default {
  computed: {
    logo() {
      return this.vuex_config.logo || "";
    },
  },
  onLoad() {

  },
  data() {
    return {
      count: '',
      placeholderStyle: "color: #999;font-size: 28upx;",
      wx_user_id: 0,
      mobile: "",
      hsh: "",
      bgh: "",
      captcha: "",
      state: false, //是否开启倒计时
      totalTime: 60, //总时间，单位秒
      recordingTime: 0, //记录时间变量
      currentTime: 0, //显示时间变量
      show: false,
      API_URL: '',
      timeData: "",
      code: "",
      show3: false,
        money: '',
        userInfo: {},
        foruserInfo: {},
      chaxunyue: 0
    };
  },

    onShow() {
        this.userInfo = uni.getStorageSync('userinfo')
    },
  methods: {
    registers() {
      this.$common.redirectTo(this.$ph.register);
    },
    jump(path) {
      uni.navigateTo({
        url: path,
      });
    },
    searchValue() {
      this.$api.searchValue({
        phone: this.mobile
      }).then(res => {
        if (res.code === 1) {
          console.log(res)
          this.chaxunyue = res.result
        }
      })
    },
    hushcode() {
      console.log('00000')
      if (!this.mobile) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none',
          duration: 3000
        })
        return false;
      }
      this.API_URL = API_URL2 + 'api/user/arithmeticCode?mobile=' + this.mobile + '.' + new Date().getTime()
    },
    submit() {
      if (!this.$common.isPhoneNumber(this.mobile)) {
        this.$common.errorToShow("手机号码格式错误！");
        return;
      }
        if (!this.money) {
            this.$common.errorToShow("请输入转赠金额！");
            return;
        }
      if (this.captcha == "") {
        this.$common.errorToShow("请输入支付密码！");
        return;
      }
        this.$api
            .getuserInfo({
                mobile: this.mobile,
            })
            .then((res) => {
                console.log(res)
                this.foruserInfo = res
                this.show = true
            })
    },
      confirm_chaifen() {
          this.$api
              .zhuanzeng({
                  mobile: this.mobile,
                  password: this.captcha,
                  money: this.money
              })
              .then((res) => {
                  uni.showToast({
                      icon: 'none',
                      title: res.reason
                  })
                  if (res.code == 1) {
                      this.show = false
                      setTimeout(() => {
                          this.$api.userInfo().then(res2 => {
                              uni.showToast({
                                  icon: 'none',
                                  title: res2.reason
                              })
                              if (res2.code == 1) {
                                  uni.setStorageSync("userinfo", res2.result);
                                  this.userInfo = res2.result
                              }
                          })
                      },1000)
                  }
              });
      },
    uploadApp() {
      plus.runtime.openURL(`${DOWNLOAD_URL}gongxifacai.apk`);
    },
  },
};
</script>

<style lang="scss">
.button {
  background-color: rgb(255, 68, 59);
  color: #fff;
  text-align: center;
  line-height: 60rpx;
  border-radius: 4px;
  margin-left: 10rpx;
  font-size: 24rpx;
  padding: 0 20rpx;
}
.login-home {
  padding: 10vw;
}
.may-value {
  margin: 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
}
page {
  height: calc(100vh - 0px);
  background-color: #fff;
}
.tips {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  padding-top: 40rpx;
}

.desc {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 30rpx;
  padding-bottom: 10vw;
  text {
    font-size: 15px;
    color: #888;
  }

  text:last-child {
    color: rgb(21, 97, 252);
  }
}

.top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 120rpx;

  image {
    width: 140upx;
    height: 140upx;
    margin: 60rpx auto;
  }
}
.tips-box {
  margin: 40rpx 0;
  text-align: right;
  font-size: 13px;
  font-weight: 400;
  color: #888;
}
.content {
  display: flex;
  flex-direction: column;

  .downLoad {
    margin: auto;
    margin-top: 42upx;
    font-size: 32upx;
    color: #6123cc;
  }

  .submit {

    height: 84upx;
    background: rgb(255, 68, 59);
    border-radius: 16upx;
    font-size: 32upx;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 84upx;
    margin: 50rpx 0rpx 0;
  }

  view {
    display: flex;
    flex-direction: row;
    align-items: center;

    image {
      margin-right: 40upx;
    }

    .u-input {
      font-size: 28rpx;
      // border-bottom: 1upx solid #e6e6e6;
    }
  }

  .hsh {
    border-bottom: 2upx solid #eee;

    .code_img {
      width: 300rpx;
      height: 80rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }

  .phone {
    background: #f3f3f3;
    border-radius: 4px;
    margin-bottom: 20rpx;
    height: 96rpx;
    .u-border {
      border: none !important;
    }
  }

  .password {
    background: #f3f3f3;
    border-radius: 4px;
    height: 96rpx;
    .u-border {
      border: none !important;
    }

    .getCode,
    .daoTime {
      margin-left: 20rpx;
      background-color: rgb(255, 68, 59);
      height: 40rpx;
      color: #fff;
      font-size: 24rpx;
      border-radius: 20rpx;
      line-height: 40rpx;
      text-align: center;
      width: 140rpx;
    }

    .u-input {
      border: none;
    }
  }
}

/* #ifdef MP-WEIXIN */
page {
  height: calc(100vh - 0px);
}

.login-home {
  height: 90.8%;
}

/* #endif */
/* #ifndef MP-WEIXIN */
page {
  height: calc(100vh - 0px);
}

.login-home {
  height: 93.8%;
}

/* #endif */

.box_popup {
  width: 662upx;
  text-align: center;

  & view:nth-child(1) {
    margin-top: 32upx;
    color: #333;
    font-size: 32upx;
    font-family: PingFang SC;
    font-weight: 500;
  }

  & view:nth-child(2) {
    margin-top: 38upx;
    font-size: 28upx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #fea845;
  }

  .btn {
    display: flex;


    view {
      width: 50%;
      border-top: 2upx solid #e6e6e6;
      opacity: 1;
      text-align: center;
      line-height: 100upx;
    }

    .cancel {
      border-right: 2upx solid #e6e6e6;
      color: #999999;
      font-size: 36upx;
      font-family: PingFang SC;
      font-weight: 500;
    }

    .ok {
      color: #007aff;
      margin-top: 32upx;
      font-size: 36upx;
      font-family: PingFang SC;
      font-weight: 500;
    }
  }
}
</style>
